<script setup>
import dayjs from 'dayjs';

const emits = defineEmits(['mouse'])

const timer = ref(null);
const flipObjs = ref([]);

const init = () => {
  const now = new Date();
  const nowTimeStr = dayjs(now).format('HHmmss');
  for(let i = 0; i < flipObjs.value.length; i++){
    unref(flipObjs.value[i]).setFront(nowTimeStr[i])
  }
}

const run = () => {
  timer.value = setInterval(()=>{
    const now = new Date();
    const nowTimeStr = dayjs(now).add(-1, 'second').format('HHmmss');
    const nextTimeStr = dayjs(now).format('HHmmss');
    for(let i = 0; i < flipObjs.value.length; i++){
      if(nowTimeStr[i] === nextTimeStr[i]){
        continue
      }
      unref(flipObjs.value[i]).flipDown(nowTimeStr[i], nextTimeStr[i])
    }
  }, 1000)
}

const flipperHour1 = ref(null);
const flipperHour2 = ref(null);
const flipperMinute1 = ref(null);
const flipperMinute2 = ref(null);
const flipperSecond1 = ref(null);
const flipperSecond2 = ref(null);

onMounted(() => {
  flipObjs.value = [
  flipperHour1,
  flipperHour2,
  flipperMinute1,
  flipperMinute2,
  flipperSecond1,
  flipperSecond2
  ]
  init();
  run();
})

onUnmounted(() => {
  clearInterval(timer.value)
})

const handleMouseEnter = () => {
  console.log('object');
  emits('mouse')
}
</script>

<template>
  <div class="flip-clock" @mouseenter="handleMouseEnter">
    <Flipper ref="flipperHour1"/>
    <Flipper ref="flipperHour2"/>
    <em>:</em>
    <Flipper ref="flipperMinute1"/>
    <Flipper ref="flipperMinute2"/>
    <em>:</em>
    <Flipper ref="flipperSecond1"/>
    <Flipper ref="flipperSecond2"/>
  </div>
</template>

<style lang="less" scoped>
.flip-clock{
  background-color: transparent;
  text-align: center;

  :deep(.flipper-box){
    margin: 0 3px;
  }

  em{
    display: inline-block;
    line-height: 102px;
    font-size: 66px;
    font-style: normal;
    vertical-align: top;
  }
}
</style>